<template>
	<view class="update-modal" :class="{active: active}">
		<view class="modal-mask"></view>
		<view class="modal-wrap">
			<view class="modal-content">
				<view class="content-header">
					<view class="header-img">
						<image :src="imgage"></image>
					</view>
				</view>
				<view class="content-body">
					<scroll-view scroll-y class="body-scroll">
						<view class="scroll-content">
							<text class="content-text">{{content}}</text>
						</view>
					</scroll-view>
				</view>
				<view class="content-footer">
					<view class="footer-confirm">
						<view v-if="!isDown" class="btn-text active" @click="downApk">立即升级</view>
						<view v-if="isDown && percent<100" class="btn-text">已下载 {{percent}} %</view>
						<view v-if="isDown && percent===100" class="btn-text">已完成</view>
						<view class="progress-inner">
							<view class="progress-bg" :style="{width: percent+'%'}"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="modal-cancle">
				<view class="cancle-button" @click="Activeclose()">
					<view class="slw-icon">&#xe832;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAppUpdateInfo} from '@/api/site.js'
	import {appid, version} from '@/config/index.js'
	import {VERSION_INFO} from '@/config/storage.js'
	import imgage from '@/static/images/version_update_header.png'
	
	export default {
		data() {
			return {
				active: false,
				imgage,
				isDown: false,
				percent: 0,
				content: '',
				update_url: '',
				newVersion:''
			}
		},
		mounted() {
			this.androidCheckUpdate()
		},
		methods: {
			async androidCheckUpdate(){
				await getAppUpdateInfo({ appid, version }).then(res => {
					const {data} = res
					this.content = data.content
					this.update_url = data.update_url
					this.newVersion=data.version
					this.onUpdateActive(true)
					// uni.reLaunch({
					//     url: '/components/version-update-modal/index'
					// });
				}).catch(err => {
					this.onUpdateActive(false)
					
				})
			},
			onUpdateActive(bool) {
				this.active = bool
				
			},
			Activeclose(){
				let new1=this.newVersion.split('.')
				let new2=version.split('.')
				if(new1[0]>new2[0]||new1[1]>new2[1]){
					uni.showToast({title:'版本升级才可使用',icon:'none'})
				}else{
					this.active =false
					let date=new Date()
					let year = date.getFullYear()
					let month = date.getMonth()+1
					let day = date.getDate()
					let getDate=year.toString()+month.toString()+day.toString()
					try{
						uni.setStorageSync('version_key', getDate);
					}catch(e){
						//TODO handle the exception
					}
					uni.switchTab({
					    url: '/pages/tabBar/home/index'
					});
				}
				
			},
			//	下载apk
			downApk() {
				const url = this.update_url
				this.isDown = true
				const downloadTask = uni.downloadFile({
					url: url,
					success: res => {
						const path = res.tempFilePath
						if (res.statusCode === 200) {
							plus.runtime.install(path, {}, function(e) {
							}, function(e) {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.alert("安装apk文件失败[" + e.code + "]：" + e.message);
							});
						} else {
							
						}
					},
					fail: res => {
						this.isDown = false
						uni.showToast({icon: 'none', title: '更新失败'})
					}
				})
				
				//	监听网络状态变化。
				uni.onNetworkStatusChange(res => {
					if (!res.isConnected) {
						this.isDown = false
						this.percent = 0
						uni.showToast({icon: 'none', title: '更新失败'})
					}
				})
				
				//	监听下载进度变化
				downloadTask.onProgressUpdate((res) => {
					this.percent = res.progress
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: transparent;
	}
	.update-modal.active{
		visibility: visible;
		.modal-mask, .modal-wrap{
			opacity: 1;
		}
	}
	.update-modal{
		width: 100%;
		height: 100vh;
		z-index: 9999;
		top: 0;
		left: 0;
		position: fixed;
		visibility: hidden;
		transition: visibility 200ms ease-in;
		background-image: url(../../static/images/bg_1.png);
		background-size: 100% 100%;
		.modal-mask, .modal-wrap {
		    opacity: 0;
		    transition: opacity 200ms ease-in;
			// z-index: 99999;
		}
		.modal-mask{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.9);
			// z-index: 10000;
		}
		.modal-wrap{
			top: 50%;
			left: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
		}
		.modal-content{
			overflow: hidden;
			border-radius: 12rpx;
			background-color: #fff;
			.content-header{
				.header-img{
					width: 600rpx;
					height: 150rpx;
				}
			}
			.content-body{
				.body-scroll{
					min-height: 300rpx;
					max-height: 480rpx;
				}
				.scroll-content{
					padding: 30rpx;
				}
				.content-text{
					line-height: 50rpx;
				}
			}
			.content-footer{
				padding: 30rpx;
				.footer-confirm{
					height: 80rpx;
					overflow: hidden;
					border-radius: 200rpx;
					position: relative;
					.btn-text.active{
						background-color: $theme_color;
					}
					.btn-text{
						color: #fff;
						width: 100%;
						height: 100%;
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.progress-inner{
						width: 100%;
						height: 100%;
						color: #3e8ef7;
						background-color: rgba(62, 142, 247, .2);
					}
					.progress-bg{
						width: 40%;
						height: 100%;
						background-color: $theme_color;
					}
				}
			}
		}
		.modal-cancle{
			position: relative;
			display: flex;
			justify-content: center;
			.cancle-button{
				top: 50rpx;
				color: #fff;
				border: 2px solid #fff;
				padding: 10rpx;
				position: absolute;
				border-radius: 50%;
			}
		}
	}
</style>
